<template>
	<view>
		<view class="contract">
			<view style="height: 76rpx;">
				<view class="title">
					<view class="contract-title">合同信息</view>
					<view class="yellow-line"></view>
				</view>
			</view>
			<view class="course">
				<view class="course-spec">
					<view class="fl">课包规格</view>
					<picker :value="specIndex" :range="specs" @change="selSpec" range-key="name">
						<view class="sel_name" v-if="isSelSpec">选择课包规格</view>
						<view v-if="!isSelSpec" class="name">{{specs[specIndex].name}}</view>
					</picker>
					<view class="iconfont icongengduo" style="color: #999;"></view>
				</view>
				<!-- <view class="course-spec">
					<view class="fl">课包定价</view>
					<input class="uni-input" placeholder="填写课包定价" />
				</view> -->
				<view class="course-spec">
					<view class="fl">获客渠道</view>
					<picker :value="channelIndex" :range="channelList" @change="selChannel" range-key="name">
						<view class="sel_name" v-if="isChannelList">选择获客渠道</view>
						<view v-if="!isChannelList" class="name">{{channelList[channelIndex].name}}</view>
					</picker>
					<view class="iconfont icongengduo" style="color: #999;"></view>
				</view>
				<!-- <view class="course-spec" style="border-bottom: none;">
					<view class="fl">合同编号</view>
					<input class="uni-input" placeholder="填写合同编号" v-model="form.ordersn" />
				</view> -->
				<view class="course-spec" style="border-bottom: none;">
					<view class="fl">是否续单</view>
					<switch :checked="is_reorder" @change="switchIsReorder" color="#fedb0d"/>
				</view>
			</view>
		</view>
		
		<!-- 赠课福利 -->
		<view class="contract">
			<view style="height: 76rpx;">
				<view class="title">
					<view class="contract-title">赠课福利</view>
					<view class="yellow-line"></view>
				</view>
			</view>
			<view class="course">
				<view class="course-spec">
					<view class="fl">常规赠课</view>
					<input class="uni-input" type="number" placeholder="请准确填写报名" v-model.number="form.common_give"/>
					<view class="section">节</view>
				</view>
				<!-- <view class="course-spec">
					<view class="fl">礼物换课</view>
					<switch :checked="checkedSwitch" @change="switchCourse" color="#fedb0d"/>
					<input class="uni-input" placeholder="填写兑换节数" :placeholder-style="disabledColor" :disabled="disabledGift" style="width: 52%;"/>
					<view class="section">节</view>
				</view> -->
				<!-- <view class="course-spec" style="height: auto;" v-show="checkedSwitch">
					<view>
						<radio-group @change="radioChange">
							<label class="flex" v-for="(item, index) in items" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current" />
								</view>
								<view class="radio">
									<image src="../../static/logo.png" mode=""></image>
									<view class="radio-title" ref="clearBorder">
										<view>{{ item.name }}</view>
										<view>金宝贝小黄帽</view>
										<view>价值￥58</view>
									</view>
								</view>
							</label>
						</radio-group>
					</view>
				</view> -->
				<view class="course-spec" style="border-bottom: none;">
					<view class="fl">校长特批</view>
					<input class="uni-input" type="number" placeholder="填写特批节数" v-model.number="form.principal_give" />
					<view class="section">节</view>
				</view>
			</view>
		</view>
		<!-- 选择签约礼品 -->
		<view class="contract gift" v-if="giftList.length > 0">
			<view style="height: 76rpx;">
				<view class="title">
					<view class="contract-title">签约礼品</view>
					<view class="yellow-line"></view>
				</view>
			</view>
			<view class="course">
				<view class="course-spec" style="height: auto;border-bottom: none;">
					<view>
						<checkbox-group @change="radioChangeGift">
							<label class="flex" v-for="(item, index) in giftList" :key="item.value">
								<view>
									<!-- <radio :value="item.id + ''" :checked="index === currentGift" ref="radio"/> -->
									<checkbox style="transform: scale(.8);" :value="item.id + ''" :checked="item.checked" ref="radio"/>
								</view>
								<view class="radio">
									<!-- <image src="../../static/logo.png" mode=""></image> -->
									<image :src="item.image" mode=""></image>
									<view class="radio-title">
										<view>{{ item.name }}</view>
										<view>
											<text>右侧勾选可换课{{ item.class_num }}节</text>
											<switch ref="Gift" style="transform: scale(.6);" color="#fedb0d" :checked="item.isClass" :disabled="item.class_num==0" @change="classSwitch(item, $event, index)"/>
											<!-- <radio :value="item.value" :checked="item.giftChecked" /> -->
										</view>
										<view>价值￥{{item.price}}</view>
									</view>
								</view>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<!-- 校长特批 -->
		<view class="contract master" v-if="giftList.length > 0">
			<view class="course">
				<view class="course-spec">
					<view class="fl">校长特批</view>
					<switch :checked="checkedHeadmaster" @change="switchHeadmaster" color="#fedb0d"/>
				</view>
				<view v-show="checkedHeadmaster">
					<view class="course-spec" style="height: auto;">
						<view>
							<checkbox-group @change="radioChangeHeadmaster">
								<label class="flex" v-for="(item, index) in giftList" :key="item.value">
									<view>
										<!-- <radio :value="item.id + ''" :checked="index === currentHeadmaster" /> -->
										<checkbox style="transform: scale(.8);" :value="item.id + ''" :checked="item.checked"/>
									</view>
									<view class="radio">
										<image :src="item.image" mode=""></image>
										<view class="radio-title">
											<view>{{ item.name }}</view>
											<!-- <view>金宝贝小黄帽</view> -->
											<view>  </view>
											<view>价值￥{{item.price}}</view>
										</view>
									</view>
								</label>
							</checkbox-group>
						</view>
					</view>
					
				</view>
				<view class="course-spec" style="border-bottom: none;">
					<view class="fl">其他情况</view>
					<input class="uni-input" placeholder="请文字描述并告知财务" v-model="form.principal_gift_remark" />
				</view>
			</view>
		</view>
		<view class="btn" @click="createdShare">
			<Dbtn :btnTxt="btnTxt"></Dbtn>
		</view>
	</view>
</template>

<script>
	import Dbtn from '../../components/button.vue'
	import { getClassList, getChannelList, getGiftList, createSign } from '../../api/informationApi.js'
	import { getUserState } from '../../api/indexApi.js'
	export default {
		data() {
			return {
				specIndex: 0,
				specs: [],
				isSelSpec: true,
				channelList: [],
				channelIndex: 0,
				isChannelList: true,
				items: [
					{
						value: 'USA',
						name: '美国',
						giftChecked: false,
					},
					{
						value: 'CHN',
						name: '中国',
						checked: true,
						giftChecked: true
					},
					{
						value: 'BRA',
						name: '巴西',
						giftChecked: false,
					},
					
				],
				giftList: [], // 礼品列表
				current: -1, // 礼物换课默认选中的
				btnTxt: '下一步',
				checkedSwitch: false, // 礼物换课 默认关闭状态
				disabledColor: "color:#ccc", //礼物换课 旁边的 input关闭状态时候禁用的颜色
				disabledGift: true, // 礼物换课 旁边的 input关闭状态时候禁用
				currentGift: -1, // 签约礼品默认选中的
				checkedHeadmaster: false, // 校长特批开关
				currentHeadmaster: -1, // 校长特批默认选中的
				form: {
					class_id: '', // 课包规格
					channel_id: '', // 渠道
					common_give: '', // 常规赠课
					principal_give: '', // 校长特批
					sign_gift: [], // 签约礼品(礼品id列表)
					sign_gift_give: [], // 签约礼品换课(礼品id列表)
					principal_gift: [], // 校长特批礼品(礼品id列表)
					principal_gift_remark: '', // 校长特批备注
					// ordersn: '', // 合同编号
					is_reorder: 0 // 是否续单
				},
				sign_gift: [], // 签约礼品(礼品id列表)
				is_reorder: false
			}
		},
		components: {
			Dbtn,
		},
		onLoad() {
			// this._getUserState() // 获取认证状态
			this._getClassList() // 获取课包规格
			this._getChannelList() // 获取渠道列表
			this._getGiftList() // 获取签约礼品列表
		},
		methods: {
			// async _getUserState() {
			// 	const res = await getUserState()
			// 	console.log(res)
			// 	if (res.data.data.status !== 2) {
			// 		setTimeout(() => {
			// 			uni.showToast({title: '未认证', icon: 'none'})
			// 			window.location.href = res.data.data.url
			// 		}, 1500)
			// 	} else {
			// 		this._getClassList() // 获取课包规格
			// 		this._getChannelList() // 获取渠道列表
			// 		this._getGiftList() // 获取签约礼品列表
			// 	}
			// },
			async _getClassList() {
				const res = await getClassList()
				// console.log(res)
				this.specs = res.data.data.list
			},
			async _getChannelList() {
				const res = await getChannelList()
				// console.log(res)
				this.channelList = res.data.data.list
			},
			async _getGiftList() {
				const res = await getGiftList()
				// console.log(res.data.data)
				this.giftList = res.data.data.list
				this.giftList.forEach(item => item.isClass = false)
			},
			// 是否续单
			switchIsReorder(e) {
				console.log(e)
				this.is_reorder = e.detail.value
			},
			// 礼物换课开关事件
			classSwitch(item, e, i) {
				console.log(item)
				// this.$refs.radio.forEach((item, index) => {
				// 	item.radioChecked = false
				// })
				this.$refs.radio[i].radioChecked = e.target.value
				if (this.$refs.radio[i].radioChecked) {
					
					this.form.sign_gift_give.push(item.id)
					
				} else {
					if (this.form.sign_gift_give.length >0) this.form.sign_gift_give.pop()
					this.form.sign_gift = this.form.sign_gift.filter(current => current.id != item.id)
					console.log(this.form.sign_gift)
				}
				// console.log(this.form)
				// this.$refs.Gift.forEach((item, index) => {
				// 	item.switchChecked = false
				// })
				this.$refs.Gift[i].switchChecked = e.target.value
				// 当前id为item.id,是否换课的值为e.target.value
				// if (this.$refs.Gift[i].switchChecked) {
				// 	this.form.sign_gift = this.form.sign_gift_give = item.id
				// } else {
				// 	this.form.sign_gift = this.form.sign_gift_give = ''
				// }
				
			},
			selSpec(e) {
				console.log(e)
				this.specIndex = e.target.value // 当前选择的索引
				this.form.class_id = this.specs[this.specIndex].id
				this.isSelSpec = false
			},
			selChannel(e) {
				console.log(e)
				this.channelIndex = e.target.value // 当前选择的索引
				this.form.channel_id = this.channelList[this.channelIndex].id
				this.isChannelList = false
			},
			switchCourse(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				this.checkedSwitch = e.target.value
			},
			switchHeadmaster(e) {
				console.log('校长特批 发生 change 事件，携带值为', e.target.value)
				this.checkedHeadmaster = e.target.value
			},
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						console.log(evt.target.value)
						break;
					}
				}
			},
			radioChangeGift(e) {
				console.log(e)
				var items = this.giftList
				// console.log(items)
				let values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				this.form.sign_gift = values
				console.log(this.form.sign_gift)
				// console.log(e.target.value - 0)
				// this.$refs.radio[ind].radioChecked = !this.$refs.radio[ind].radioChecked
				// this.$refs.Gift.forEach((item, index) => {
				// 	console.log(item)
				// 	item.switchChecked = false
				// })
				// this.form.sign_gift = e.target.value - 0
			},
			radioChangeHeadmaster(evt) {
				console.log(evt)
				this.form.principal_gift = evt.target.value
				for (let i = 0; i < this.giftList.length; i++) {
					if (this.giftList[i].value === evt.target.value) {
						this.currentHeadmaster = i;
						console.log(evt.target.value)
						break;
					}
				}
				console.log(this.form.principal_gift)
			},
			async createdShare() {
				// uni.navigateTo({
				// 	url: '../identification/baseInfo'
				// })
				if (!this.checkedHeadmaster) {
					this.form.principal_gift = []
				}
				this.checkForm()
				
			},
			async checkForm() {
				// this.form.sign_gift = [...this.form.sign_gift, ...this.form.sign_gift_give]
				this.form.sign_gift = this.form.sign_gift.map(item => item - 0)
				this.form.sign_gift = [...new Set(this.form.sign_gift)]
				console.log(this.form)
				if (!this.form.class_id) {
					return uni.showToast({
						title: '请选择课包规格',
						icon: 'none'
					})
				} else if (!this.form.channel_id) {
					return uni.showToast({
						title: '请选择获客渠道',
						icon: 'none'
					})
				} else if (!this.form.common_give) {
					return uni.showToast({
						title: '请填写常规赠课',
						icon: 'none'
					})
				} else {
					console.log(this.form.sign_gift)
					let data = {...this.form}
					let arr1 = [...this.form.sign_gift]
					let arr2 = [...this.form.sign_gift_give]
					let arr3 = [...this.form.principal_gift]
					data.sign_gift = arr1
					data.sign_gift_give = arr2
					data.principal_gift = arr3
					if (this.is_reorder) {
						data.is_reorder = 1
					}
					if (arr2.length > 0) {
						let arr4 = arr2.map(item => {
							return arr1.includes(item)
						})
						let isTrue = arr4.every(item => item == true)
						console.log(isTrue)
						if (isTrue) {
							console.log(data)
							if (this.checkedHeadmaster && !this.form.principal_gift) {
								return uni.showToast({title: '请选择校长特批礼品',icon: 'none'})
							}
							const res = await createSign(data)
							console.log(res)
							if (res.data.code === 0) {
								uni.navigateTo({
									url: `../identification/baseInfo?id=${res.data.data.id}`
								})
							}
						} else {
							return uni.showToast({
								title: '提交出错，请在选择礼品换课的商品前打勾',
								icon: 'none'
							})
						}
					} else {
						console.log(data)
						if (this.checkedHeadmaster && !this.form.principal_gift) {
							return uni.showToast({title: '请选择校长特批礼品',icon: 'none'})
						}
						const res = await createSign(data)
						console.log(res)
						if (res.data.code === 0) {
							uni.navigateTo({
								url: `../identification/baseInfo?id=${res.data.data.id}`
							})
						}
					}
					
				}
			}
		},
		mounted() {
			this.$nextTick(() =>{
				
			})
		},
		watch: {
			checkedSwitch(val) {
				if(val) {
					this.disabledColor = "color:#999"
					this.disabledGift = false
				} else {
					this.disabledColor = "color:#ccc"
					this.disabledGift = true
					this.current = -1
				}
			},
			checkedHeadmaster(val) {
				if (val) {
					console.log(this.currentHeadmaster)
				} else {
					this.currentHeadmaster = -1
				}
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.fl {
		display: flex;
		flex: 1;
		font-family: PingFangSC-Regular;
		font-size: 30rpx;
		color: #191919;
	}
	.contract {
		padding-top: 77rpx;
		.title {
			margin-left: 50rpx;
			font-family: PingFangSC-Semibold;
			font-size: 38rpx;
			font-weight: 600;
			color: #191919;
			position: relative;
			.yellow-line {
				width: 168rpx;
				height: 14rpx;
				background-color: #fedb0d;
				position: absolute;
				left: -6rpx;
				bottom: -52rpx;
			}
			.contract-title {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}
		.course {
			width: 90%;
			// height: 480rpx;
			margin: 0 auto;
			background-color: #fff;
			box-shadow: 0 60rpx 300rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 2rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.course-spec {
				display: flex;
				align-items: center;
				height: 119rpx;
				border-bottom: 1rpx solid #e6e6e6;
				.name {
					padding-right: 10rpx;
					font-size: 30rpx;
				}
				.uni-input {
					text-align: right;
				}
				.radio {
					display: flex;
					align-items: center;
					image {
						margin-left: 40rpx;
						width: 160rpx;
						height: 160rpx;
						border-radius: 4px;
					}
					.radio-title {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-left: 20rpx;
						font-family: SourceHanSansCN-Regular;
						border-bottom: 1rpx solid #e6e6e6;
						view:first-child {
							width: 340rpx;
							font-size: 30rpx;
							color: #1a1a1a;
							padding-top: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						view:nth-child(2) {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 340rpx;
							font-size: 24rpx;
							color: #999;
							padding: 13rpx 0 23rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						view:last-child {
							width: 340rpx;
							font-size: 24rpx;
							color: #191919;
							padding-bottom: 30rpx;
						}
					}
				}
			}
		}
	}
	.btn {
		margin: 54rpx 0 36rpx 0;
	}
	.sel_name {
		font-family: PingFangSC-Regular;
		font-size: 30rpx;
		padding-right: 10rpx;
		color: #999;
	}
	.uni-input-placeholder {
		color: #999;
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.section {
		font-size: 30rpx;
		color: #191919;
	}
	.master .radio-title view:nth-child(2) {
		line-height: 33rpx;
	}
	.master .course-spec .flex {
		margin: 20rpx 0;
	}
	.gift .flex:last-child .radio .radio-title:last-child {
		border-bottom: none;
	}
	.master .flex:last-child .radio .radio-title:last-child {
		border-bottom: none;
	}
</style>
